<template>
        <view class="relative" :style="[boxBaseSyle()]">
            <image v-for="(avatar, index) in list" :key="avatar.id" :src="avatar.url" class="absolute br-50_" :style="[itemBaseSyle(), itemSyle(index, avatar)]" />
            <!-- <image src="/static/images/user-img.png" class="br-50_lastimg" :style="[moreIconSyle()]" /> -->
        </view>
    
</template>

<script>
/**
 * 头像组
 
 * 
 */
export default {
    name: 'mo-avatar-group',
    props: {
        /** 轮播间隔时间 */
        interval: {
            type: Number,
            default: 3000
        },
        urls: {
            type: Array,
            default: () => [] 
        },
        width: {
            type: Number,
            default: 60
        },
        height: {
            type: Number,
            default: 60
        },
        /** 重叠的部分 */
        overlap: {
            type: Number,
            default: 20
        },
        prop: {
            type: String,
            default: 'url'
        },
        showNumber: { // 头像组展示数量
            type: Number,
            default: 3
        }
    },
    data() {
        return {
            list: [],
            intervalTimer: null,
            curLastIndex: 3

        }
    },
    computed:{
        marginLeft() {
            return this.width - this.overlap
        },
        zScopedSlots() {
            return this.$scopedSlots;
        },
        zSlots() {
            return this.$slots;
        }
    },
    watch: {
        urls: {
            handler(newVal){
                console.log(71, this.showNumber)
                // TODO 新数据到来，一个一个的替换，
                this.list = newVal.slice(0, this.showNumber).map((item, index) => {
                    let url = item && item[this.prop || ''];
                    if (typeof item === 'string') {
                        url = item;
                    }

                    return { url, order: index + 1, id: `avatar-${index}` };
                });
                if (newVal.length > this.showNumber) {
                    this.stop();
                    this.start();
                } else {
                    this.stop();
                }
            },
            deep: true,
            immediate: true
        }
        // notifi: {
        // 	handler(_new) {
        // 		this.notifiData = _new
        // 	},
        // 	immediate: true,
        // }
    },
    created(){
        this.curLastIndex = this.showNumber
    },
    mounted() {
    },
    methods: {
        stop() {
            clearInterval(this.intervalTimer);
        },
        start() {
            this.intervalTimer = setInterval(() => {
                this.forwardMove();
            }, this.interval); // 可以根据需要调整间隔时间
        },
        itemSyle(index, item) {
            // 正常状态的展示
            const style = {
                'z-index': item.order,
                transition: '0.25s',
                transform: ` translateX(${(item.order - 1) * this.marginLeft}rpx)`, // scale(1)
                opacity: 1

            };
            const total = this.list.length;

            // 缩小中
            if (item.order == 0) {
                style.transform = ` translateX(${item.order * this.marginLeft}rpx)`; // scale(0)
                style.opacity = 0;
            }

            // 位移中 移动到末尾
            if (item.order == -1) {
                style.transform = ` translateX(${(total - 1) * this.marginLeft}rpx)`; // scale(0)
                style['z-index'] = total;
                style.opacity = 0;
            }

            if (item.order == total) {
                style['z-index'] = total;
            }
            return style;
        },
        itemBaseSyle() {
            return { width: this.width + 'rpx', height: this.height + 'rpx' };
        },
        boxBaseSyle() {
            const len = this.list.length;
            return {
                width: len * this.width - (len - 1) * this.overlap + 'rpx',
                height: this.height + 'rpx',
            };
        },
        boxWrapSyle() {
            const len = this.showNumber;
            return {
                width: len * this.width - (len - 1) * this.overlap + 'rpx',
                height: this.height + 'rpx',
            };
        },
        async forwardMove (){
            this.list.forEach((item, index) => {
                if (item.order == 1) {
                    const timer = setTimeout(() => {
                        item.order = 0;
                        this.list.shift();
                        clearTimeout(timer);
                    }, 100);
                }
                item.order--;
            });
            this.$nextTick(function(){
                const netItem = this.urls?.[this.curLastIndex];
                let url = netItem && netItem[this.prop.url || ''];
                if (typeof netItem === 'string') {
                    url = netItem;
                }

                const tempItme = { url, order: -1, id: `avatar-${this.curLastIndex}` };
                this.list.push(tempItme);
                const timer1 = setTimeout(() => {
                    // 300后移动到末尾结束 开始正常展示
                    this.list[this.list.length - 1].order = this.list.length;
                    clearTimeout(timer1);
                }, 120);
                if (this.curLastIndex === this.urls?.length - 1) {
                    this.curLastIndex = 0;
                } else {
                    this.curLastIndex++;
                }

            })
        }
    }


}
</script>
<style lang="scss" scoped>
.avatar-slider {
  overflow: hidden;
  width: 400rpx;
}

.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
.br-50_ {
  border-radius: 50%;
}
</style>
